<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>商品评论</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../lib/css/swiper.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
  <script src="../../lib/js/flexible.js"></script>
  <script src="../../lib/js/fastclick.js"></script>
</head>

<body ontouchstart>
  <div class="app-wrap bg-gary" id="productComment" v-cloak>
    <!-- 头部 -->
    <div class="product-topNav bg-white">
      <i class="icon-back-product ml-48"></i>
      <div class="title-items">
        <span class="item"><a href="../../html/product/product.html">商品</a></span>
        <span class="item"><a href="../../html/product/product_detail.html">详情</a></span>
        <span class="item cur"><a href="javascript:;">评价</a></span>
      </div>
      <div class="icon-wrap mr-48">
        <i class="icon-cart-product mr-48"></i>
        <div class="msg">
          <i class="icon-msg-product"></i>
          <b>6</b>
        </div>

      </div>

    </div>

    <!-- 筛选 -->
    <div class="product-filter bg-white">
      <div class="hd m-30">
        <div class="check"><input class="radio" type="checkbox" id="onlyCur" @click="checkCurProduct()"></input><label class="name" for="onlyCur">只看到当前产品</label> </div>
        <div class="rating"><span>好评度&nbsp;&nbsp;{{praiseOf}}%</span></div>
      </div>
      <div class="bd m-30">
        <div class="item" :class="{cur:index==filterCur}" @click="sel(index)" v-for="(item,index) in filter" :key="index"><span>{{item.name}}{{item.count}}</span></div>
      </div>
    </div>
    <!-- 评价 -->
    <div class="commentDetail-wrap bg-white">
      <div class="comment-section m-30" v-for="item in commentList">
        <div class="hd">
          <div class="avatar">
            <img :src="item.picImg" alt="">
          </div>
          <div class="info">
            <div class="info-l">
              <span class="name">{{item.userName}}</span>
              <div class="rating">
                <span class="icon-ratign" v-for="num in item.commodityDescription"></span>
              </div>
            </div>
            <div class="info-r">
              <span class="time">{{item.createTime|format}}</span>
            </div>
          </div>
        </div>
        <div class="bd">
          <p class="comment">{{item.content}}</p>
          <div class="img" v-if="item.picture">
            <img v-for="img in item.picture.split(',')" :src="img" alt="">
          </div>
          <div class="info" v-if="item.colorName||item.sizeName">
            <span v-if="item.colorName">颜色分类:{{item.colorName}};</span>
            <span v-if="item.sizeName">尺寸:{{item.sizeName}}</span>
          </div>
          <p class="reply bg-gary" v-if="item.reply">店家回复：{{item.reply}}</p>
        </div>
      </div>
    </div>
    <div class="hover-cart"></div>
    <!-- 底部fixed buttons -->
    <div class="fixed-btns bg-white">
      <div class="item-left">
        <div class="item"><em class="icon-ft-fixed-connect"></em><span>客服</span></div>
        <div class="item"><em class="icon-ft-fixed-shop"></em><span>店铺</span></div>
        <div class="item"><em class="icon-ft-fixed-favor"></em><span>收藏</span></div>
      </div>
      <div class="item-right">
        <div class="item bg-orange"><span>加入购物车</span></div>
        <div class="item bg-red"><span>立即购买</span></div>
      </div>
    </div>
  </div>

  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/axios.min.js"></script>
  <script src="../../lib/js/swiper.min.js"></script>
  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="../../lib/js/mock.js"></script>
  <script src="../../js/all.min.js"></script>
  <script>
    productComment()
  </script>
</body>

</html>